<template lang="html">
    <div class="shopcart-wrapper">
        <div class="ball-contrainer">
            <transition-group v-on:before-enter="beforeEnter" @after-enter="afterEnter" @enter="enter" name="drop" >
                    <div class="ball" :key="ball.isShow"  v-for="ball in balls"  v-show="ball.isShow">

                    </div>

            </transition-group>

        </div>
        <div class="left" :class="{act:totalCount}">
            <div class="out" @click="slideShow=!slideShow">
                <div class="in">
                    <p class="count-box" v-if="totalCount">{{totalCount}}</p>
                    <i class="icon iconfont icon-gouwuche"></i>
                </div>
            </div>
        </div>
        <div class="pay-msg">
            <div class="money">
                ￥{{totalPrice}}
            </div>
            <div class="dilivery-fee">
                配送费￥{{diliveryPrice}}
            </div>
        </div>
        <div class="topay" :class="{bggreen:totalPrice>=minPrice}">
            <span v-if="totalPrice==0">￥{{minPrice}}起送</span>
            <span v-if="totalPrice>0&&totalPrice<minPrice">还差￥{{minPrice-totalPrice}}起送</span>
            <span v-if="totalPrice>=minPrice" >结算</span>
        </div>
        <transition name="slide">
            <div class="select-list-box" v-if="slideShow">
                <div class="cart-header">
                    <span class="car">购物车</span>
                    <span class="clear">
                        <i class="icon iconfont icon-lajitong"></i>
                        <span>清空</span>
                        </span>
                </div>
                <ul class="cart-list">
                    <li>
                        <div class="food-info">
                            <div class="title">
                                卤鸭锁骨
                            </div>
                            <span>240g</span>
                        </div>
                        <span class="price">￥49.8</span>
                    </li>
                </ul>
            </div>
        </transition>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
	props: {
		selectedFood: {
			type: Array,
			default () {
				return [{
					count: 0,
					price: 10
				}]
			}
		},
		diliveryPrice: {
			type: Number,
			default: 10
		},
		minPrice: {
			type: Number,
			default: 20
		}
	},
	computed: {
		totalPrice() {
			let total = 0;
			this.selectedFood.forEach((food) => {
				total += food.price * food.count;
			})
			return total;
		},
		totalCount() {
			let count = 0;
			this.selectedFood.forEach((food) => {
				count += food.count;
			})
			return count;
		}
	},
	data() {
		return {
			balls: [{
				isShow: false
			}, {
				isShow: false
			}, {
				isShow: false
			}, {
				isShow: false
			}, {
				isShow: false
			}],
			slideShow: false,
			dropBalls: []
		}
	},
	mounted() {
		console.log(this.balls);
	},
	methods: {
		//找到隐藏的小球，设置为true，并且放入下落小球的数组
		dropBall(target) {
			for (let i = 0; i < this.balls.length; i++) {
				let ball = this.balls[i];
				if (!ball.isShow) {
					this.balls[i].isShow = true;
					this.balls[i].el = target;
					this.dropBalls.push(ball);
					return;
				}
			}
		},
		beforeEnter(el) {
			for (let i = 0; i < this.balls.length; i++) {
				let ball = this.balls[i];
				//运动的小球，那么获得他相对视口的位置
				if (ball.isShow) {
					let rect = ball.el.getBoundingClientRect();
					let x = rect.left - 32;
					let y = -(window.innerHeight - rect.top - 22);
					el.style.display = ''; //使小球显示
					el.style.webkitTransform = `translate3d(${x}px,${y}px,0)`;
					// let x = rect
					// console.log(rect);
				}

			}
		},
		enter(el) {
			//触发浏览器重新绘制
			let rf = el.offsetHeight;
			this.$nextTick(() => {
				el.style.display = ''; //使小球显示
				el.style.transform = `translate3d(0,0,0)`;
			})
		},
		afterEnter(el) {
			let ball = this.dropBalls.shift();
			if (ball) {
				ball.isShow = false;
				el.style.display = 'none';
			}
			console.log(this.dropBalls, 'dropBalls');
		}
	}
}
</script>

<style lang="less">
@import '../../../static/var.less';

.shopcart-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: @base*96rem;
    background: red;
    display: flex;
    justify-content: space-between;
    .ball-contrainer {
        position: absolute;
        left: @base*62rem;
        z-index: 200;
        .ball {
            width: @base*32rem;
            height: @base*32rem;
            border-radius: 50%;
            background: @main-color;
            transition: 0.5s;
        }
    }
    .left {
        width: @base*170rem;
        background: @bggray1;
        position: relative;
        z-index: 10;
        &.act {
            .out {
                background: @bggray1;
                .in {
                    background: @main-color;
                    i {
                        color: #fff;
                    }
                }
            }
        }
        .out {
            width: @base*110rem;
            height: @base*110rem;
            border-radius: 50%;
            background: @bggray2;
            transform: translate(@base*25rem,-@base*24rem);
            .in {
                width: @base*90rem;
                height: @base*90rem;
                border-radius: 50%;
                background: @bggray1;
                transform: translate(@base*10rem,@base*10rem);
                text-align: center;
                line-height: @base*90rem;
                position: relative;
                .count-box {
                    position: absolute;
                    top: -10px;
                    left: @base*60rem;
                    padding: @base*6rem @base*12rem;
                    color: #fff;
                    background: red;
                    font-size: @base*24rem;
                    height: @base*24rem;
                    line-height: @base*24rem;
                    border-radius: @base*50rem;
                }
                i {
                    font-size: @base*50rem;
                    color: @fc3;
                }
            }
        }
    }
    .pay-msg {
        flex: 1;
        background: @bggray1;
        position: relative;
        z-index: 10;
        .money {
            color: #fff;
            font-size: @base*32rem;
            margin-top: @base*10rem;
        }
        .dilivery-fee {
            color: rgba(255,255,255,0.8);
            font-size: @base*12rem;
        }
    }
    .topay {
        width: @base*210rem;
        height: @base*96rem;
        background: @bggray2;
        text-align: center;
        line-height: @base*96rem;
        color: #fff;
        font-size: @base*28rem;
        font-weight: 700;
        position: relative;
        z-index: 10;
        &.bggreen {
            background: #00E475;
        }
    }
    .select-list-box {
        position: absolute;
        bottom: @base*96rem;
        left: 0;
        // max-height: @base*721rem;
        height: @base*721rem;
        width: 100%;
        background: #fff;
        overflow: hidden;
        .cart-header {
            padding: 0 @base*25rem;
            height: @base*80rem;
            background: @bggray3;

            display: flex;
            justify-content: space-between;
            .car {
                color: @fc1;
                border-left: @base*5rem solid @main-color;
                height: @base*40rem;
                padding-left: @base*10rem;
                line-height: @base*40rem;
                margin-top: @base*20rem;

            }
            .clear {
                line-height: @base*80rem;
                font-size: @base*16rem;
                color: @fc1;
                i {
                    font-size: @base*16rem;
                }
            }
        }
        .cart-list {
            padding: 0;
            margin: 0;
            list-style: none;
            width: 100%;
            height: 100%;
            li {
                height: @base*80rem;
                padding: @base*15rem @base*25rem;
                border-bottom: 1px solid @lc1;
                display: flex;
                justify-content: space-between;
                .food-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    .title {}
                    span {
                        font-size: @base*1rem;
                        color: @fc1;
                        text-align: left;
                    }
                }
                .price {
                    color: #FF6200;
                    font-weight: 700;
                }
            }
        }
    }
}
.slide-enter-active,
.slide-leave-active {
    transition: 0.5s;
}
.slide-enter {
    transform: translateY(100%);
    opacity: 0;
}
.slide-leave-active {
    transform: translateY(100%);
    opacity: 0;
}
</style>
